<template>
  <div class="amap-page-container">
    <thing-cfg-dlg ref="thingDlg"></thing-cfg-dlg>
    <a-drawer
      title="告警"
      placement="right"
      :closable="false"
      :visible="showAlarm"
      @close="showAlarm = false"
      :width="720"
    >
      <alarm-table :alarms="curentAlarms" noclear="true"></alarm-table>
    </a-drawer>
    <div class="toolbar">
      当前坐标: {{ lng }}, {{ lat }}
      <ObjSelectWithIP
        ref="objTree"
        class="inner"
        @treesel="onTreeSelected"
      ></ObjSelectWithIP>
    </div>
    <div>
      <div :id="currentPageIndex" class="amap-demo"></div>
      <!-- <iframe  src="/baiduOffLineMap/html/demo.html"  class="amap-demo" style="width:100%;height:" /> -->
    </div>
    <!--
    <el-amap
      :amap-manager="amapManager"
      ref="mapview"
      :center="center"
      :zoom="zoom"
      class="amap-demo"
      style="display: none"
      :events="events"
      pitch-enable="true"
      mapStyle="amap://styles/light"
    >
      <el-amap-marker
        v-for="(marker, index) in markers"
        :key="index"
        :events="marker.events"
        :position="marker.position"
        :icon="marker.icon"
        :label="marker.label"
      />
      <el-amap-info-window
        v-if="window"
        :position="window.position"
        :visible="window.visible"
        :content="window.content"
        :offset="window.offset"
        :close-when-click-map="true"
        :is-custom="true"
      >
        <div id="info-window">
          <p>{{ window.name }}</p>
          <p><a class="detail" @click="checkDetail(window.uid)">实时数据</a></p>
          <p>
            <a class="detail" @click="showObjAlarm(window.uid)">查看告警</a>
          </p>
          <p><a class="detail" @click="editThing(window.uid)">配置设备</a></p>
        </div>
      </el-amap-info-window>
    </el-amap>-->
  </div>
</template>

<script>
import ThingCfgDlg from "@/components/cfg/dcfg/ThingCfgDlg.vue";
import ObjSelectWithIP from "@/components/objTree/ObjSelectWithIP.vue";
//import normal from "@/assets/img/mapicon/normalicon.png";
//import offline from "@/assets/img/mapicon/offlinelicon.png";
import { editActiveThing } from "@/services/things";
import alarmTable from "@/components/alarm/alarmTable.vue";
//import alarm from "@/assets/img/mapicon/alarmicon.png";
//import { AMapManager } from "vue-amap";
//let amapManager = new AMapManager();
const content = ` <div id="info-window">
          <p><a class="detail" onclick="checkDetail(window.uid)">实时数据</a></p>
          <p>
            <a class="detail" onclick="showObjAlarm(window.uid)">查看告警</a>
          </p>
          <p><a class="detail" onclick="editThing(window.uid)">配置设备</a></p>
        </div>`;

export default {
  name: "mapView",
  components: { ObjSelectWithIP, ThingCfgDlg, alarmTable },
  props: ["searchCenter"],
  data: function () {
    const self = this;
    return {
      currentPageIndex: "map_demo",
      showAlarm: false,
      notShowSet: {},
      data: [],
      //amapManager,
      zoom: 12,
      center: ["121.599197", "31.205379"],
      expandZoomRange: true,
      activeBox: {},
      //markers: [],
      //windows: [],
      window: "",
      map: {},
      curentAlarms: [],
      /*
      events: {
        click(e) {
          const { lng, lat } = e.lnglat;
          self.lng = lng;
          self.lat = lat;
        },
        init(o) {
          console.log("&&&&&&&&&&&&&&&&&&", o);
        },
      },*/
      lng: 0,
      lat: 0,
    };
  },

  mounted() {
    const self = this;
    this.currentPageIndex = "map_demo_" + parseInt(Math.random() * 10000);
    this.refresh(); //this time

    window.checkDetail = function (uid) {
      self.checkDetail(uid);
    };
    window.showObjAlarm = function (uid) {
      self.showObjAlarm(uid);
    };
    window.editThing = function (uid) {
      self.editThing(uid);
    };

    /*
    setTimeout(function () {
      self.drawBaiDuMAp(self.currentPageIndex);
    }, 500);
    console.log("********=======================");
    */
  },
  methods: {
    /*
    drawBaiDuMAp(mapid) {
      var map = initMap(mapid);

      //创建无事件标点
      var marker = new BMap.Marker(new BMap.Point(106.5710895, 29.5589925));
      var iconc = new BMap.Icon(
        "../Baidu_JS/images/marker_red_sprite.png",
        new BMap.Size(40, 34)
      );
      marker.setIcon(iconc);
      map.addOverlay(marker); //将标记添加到地图中

      //创建有事件标点
      var point2 = new BMap.Point(106.5730895, 29.5589925);
      marker = new BMap.Marker(point2);
      iconc = new BMap.Icon(
        "../Baidu_JS/images/marker_red_sprite.png",
        new BMap.Size(40, 34)
      );
      marker.setIcon(iconc);
      map.addOverlay(marker); //将标记添加到地图中

      var infoWindow = new BMap.InfoWindow("test", {
        position: point2, // 指定文本标注所在的地理位置
        offset: new BMap.Size(5, -5), //设置文本偏移量
      }); // 创建信息窗口对象
      marker.addEventListener("click", function (e) {
        console.log(e);
        map.openInfoWindow(infoWindow, point2);
      });

      //文件文本标识
      var point3 = new BMap.Point(106.5760895, 29.5589925);
      var opts = {
        position: point3, // 指定文本标注所在的地理位置
        offset: new BMap.Size(5, -5), //设置文本偏移量
      };
      var label = new BMap.Label("<div>hello Test</div>", opts); // 创建文本标注对象
      label.setStyle({
        color: "red",
        fontSize: "12px",
        height: "40px",
        lineHeight: "20px",
        fontFamily: "微软雅黑",
      });
      map.addOverlay(label);

      //添加画线覆盖
      var arrPois = [
        new BMap.Point(106.5770895, 29.552),
        new BMap.Point(106.5780895, 29.553),
        new BMap.Point(106.5790895, 29.554),
        new BMap.Point(106.5800895, 29.555),
        new BMap.Point(106.5810895, 29.554),
        new BMap.Point(106.5820895, 29.553),
        new BMap.Point(106.5830895, 29.552),
        new BMap.Point(106.5840895, 29.551),
        new BMap.Point(106.5850895, 29.552),
      ];
      map.addOverlay(
        new BMap.Polyline(arrPois, {
          strokeColor: "blue",
          strokeWeight: 6,
          strokeOpacity: 0.5,
        })
      );
      map.setViewport(arrPois);

      map.addEventListener("click", function (e) {
        console.log("点击位置经纬度：" + e.point.lng + "," + e.point.lat);
      });
    },*/
    onSelectItem(value) {
      let pt = this.data.find((item) => {
        return item.uid == value;
      });
      if (pt) {
        let ps = pt.position.split(",");
        var point = new BMap.Point(ps[0], ps[1]);
        this.map.centerAndZoom(point, 15);
        if(this.notShowSet[value]){
          this.addItem(this.notShowSet[value])
        }
      }
    },

    refresh() {
      //let _this = this;

      let _this = this;

      this.$store.dispatch("thingView/refreshAllThings", {}).then(() => {
        let cache = _this.$store.state.thingView.thingCache;

        for (let uid in cache) {
          let r = cache[uid];
          //let alarms = {
          if (!r.lon || !r.lat) {
            continue;
          }
          _this.data.push({
            position: r.lon + "," + r.lat,
            name: r.name,
            ip: r.ip,
            uid: r.uid,
            center: [r.lon, r.lat],
            state: r.state,
          });
        }

        _this.point();
      });
    },
    onTreeSelected(obj) {
      if (obj) {
        if (obj.lon && obj.lat) {
          this.center = [obj.lon, obj.lat];

          this.lng = obj.lon;
          this.lat = obj.lat;
          this.onSelectItem(obj.uid);
        }
      }
    },
    addItem(item) {
      delete this.notShowSet[item.uid]
      let self = this;
      let ps = item.position.split(",");
      var point2 = new BMap.Point(ps[0], ps[1]);
      let marker = new BMap.Marker(point2);
      let ipath =
        item.state == 1
          ? "/baiduOffLineMap/Baidu_JS/images/marker_blue_sprite.png"
          : "/baiduOffLineMap/Baidu_JS/images/marker_red_sprite.png";
      let iconc = new BMap.Icon(ipath, new BMap.Size(40, 34));
      marker.setIcon(iconc);
      self.map.addOverlay(marker);
      //var point3 = new BMap.Point(ps[0], ps[1]);
      var opts = {
        position: point2, // 指定文本标注所在的地理位置
        offset: new BMap.Size(5, -15), //设置文本偏移量
      };
      let txt = "<div>" + item.name + "@" + item.ip + "</div>";
      let label = new BMap.Label(txt, opts); // 创建文本标注对象
      label.setStyle({
        color: item.state == 1 ? "blue" : "gray",
        fontSize: "12px",
        //width:"140px",
        //height: "40px",
        //lineHeight: "20px",
        //fontFamily: "微软雅黑",
      });
      self.map.addOverlay(label);
      var infoWindow = new BMap.InfoWindow(content, {
        position: point2, // 指定文本标注所在的地理位置
        offset: new BMap.Size(5, -5), //设置文本偏移量
        //title: "信息窗口", // 信息窗口标题
        enableMessage: true, //设置允许信息窗发送短息
      }); // 创建信息窗口对象
      marker.addEventListener("click", function (e) {
        console.log(e);
        self.map.openInfoWindow(infoWindow, point2);
        self.activeBox = item;
      });

      //  加点
      //console.log("--------points---------", this.data.length);
      //this.markers = markers;
      // 加弹窗
      //this.windows = windows;
    },
    point() {
      var map;
      try {
        map = initMap(this.currentPageIndex);
      } catch (err) {
        map = new BMap.Map(this.currentPageIndex,{
          minZoom : 1,
          maxZoom : 16,
        });
        map.enableScrollWheelZoom(true);
        var point = new BMap.Point(116.404, 39.915); // 创建点坐标
        map.centerAndZoom(point, 15);
      }

      let self = this;
      map.addEventListener("mousemove", function (e) {
        self.lng = e.point.lng;
        self.lat = e.point.lat;
      });
      this.map = map;
      //const markers = [];
      //const windows = [];
      //const that = this;
      var center;
      if (this.data && this.data.length > 0) {
        this.center = this.data[0].center;
        let ps = this.data[0].position.split(",");
        var point2 = new BMap.Point(ps[0], ps[1]);
        //map.setCenter(point2);
        map.centerAndZoom(point2, 15);
        center = point2;
      }
      //let self = this;
      this.data.forEach((item, index) => {
        if (index > 300) {
          self.notShowSet[item.uid] = item;
          return;
        }
        self.addItem(item);
      });
      //  加点
      console.log("--------points---------", this.data.length);
      //this.markers = markers;
      // 加弹窗
      //this.windows = windows;
    },
    checkDetail(uid) {
      if (!uid) {
        uid = this.activeBox.uid;
      }
      this.$store.dispatch("thingView/refreshActiveThing", uid).finally(() => {
        this.$router.push("/real/");
      });
    },
    editThing(uid) {
      if (!uid) {
        uid = this.activeBox.uid;
      }
      this.$store.dispatch("thingView/refreshActiveThing", uid).finally(() => {
        editActiveThing(this, this.$refs.thingDlg);
      });
    },
    showObjAlarm(uid) {
      let self = this;
      if (!uid) {
        uid = this.activeBox.uid;
      }
      this.$store.dispatch("thingView/refreshActiveThing", uid).finally(() => {
        self.showAlarm = true;

        self.$nextTick(() => {
          self.curentAlarms = self.$store.state.thingView.activeThing.alarms;
          console.log("--------currentAlarms--------", self.curentAlarms);
        });
      });
    },
  },
};
</script>



<style lang='less' scoped>
a {
  color: rgb(203, 203, 224);
}
a:hover {
  color: #f00;
}
.toolbar {
  text-align: center;
  background: rgba(40, 40, 64, 0.6);
  color: black;
  top: 20px;
  position: absolute;
  width: 100%;
  z-index: 999;
}
.amap-demo {
  height: calc(100vh - 140px);
  margin-top: 0px;
}
.amap-page-container {
  position: relative;
}
#info-window {
  width: 140px;
  height: 140px;
  margin-left: 30px;
  background: rgba(27, 27, 29, 0.9);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
#info-window.detail {
  width: 100%;
  height: 24px;
  color: #fff;
  background-color: #7da6db;
  position: absolute;
  bottom: 0;
  font-size: 12px;
  line-height: 24px;
  text-align: center;
  cursor: pointer;
}
</style>